/**
 * UserEdit
 * User具体项的编辑
 */
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Grid, Card, Icon, Form, Label, Dropdown } from 'semantic-ui-react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import axios from 'axios';
import './UserEdit.css';

toast.configure({
    autoClose: 1000,
    draggable: false,
    closeButton: false,
    position: toast.POSITION.TOP_RIGHT
});

class UserEdit extends Component{
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            email: '',
            role: '',
            isActive: true,
        }
    }

    componentDidMount(){
        axios.get("/api/auth/user/" + this.props.id ,{
            headers: {
                'Authorization': 'Bearer ' + localStorage.usertoken,
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(res => {
            if (res.data.success) {
                const user = res.data.user;
                this.setState({
                    username: user.username,
                    email: user.email,
                    role: user.role,
                    isActive: user.isActive
                });
            }
        }).catch(err => {
            console.log(err);
        });
    }

    successNotify = () => toast.success("属性更新成功", {
        onClose: () => this.props.history.push('/userpanel')
    });

    onChange(e) {
        this.setState({[e.target.name] : e.target.value})
    }

    update() {
        axios.patch("/api/auth/user/" + this.props.id, {
            role: this.state.role,
            isActive: this.state.isActive
        },{
            headers: {
                'Authorization': 'Bearer ' + localStorage.usertoken
            }
            }).then(res => {
                this.successNotify();
        }).catch(err => {
            console.log(err);
        });
    }

    roleChange = (e, { value }) => {
        this.setState({
            role: value
        }, this.update);
    }

    activeChange = (e, { value }) => {
        this.setState({
            isActive: value
        }, this.update);
    }
    
    render() {
        const roleOptions = [
            { key: 1, text: 'Admin', value: 'Admin' },
            { key: 2, text: 'Manager', value: 'Manager' },
            { key: 3, text: 'Guest', value: 'Guest' },
        ]
        const activeOptions = [
            { key: 1, text: '是', value: true },
            { key: 2, text: '否', value: false },
        ]
        
        return (
            <Grid textAlign='left' verticalAlign='middle'>
                <Grid.Row>
                    <Grid.Column width={16}>
                        <Card fluid color='yellow'>
                            <Card.Content>
                            <h3><Icon name="refresh"></Icon>&nbsp;&nbsp;用户属性编辑</h3>
                            </Card.Content>
                            <Card.Content>
                                <Form style={{ textAlign: 'left'}}>
                                    <Label pointing='below' as='a' color='green'>Your Email</Label>
                                    <Form.Input fluid icon='mail' iconPosition='left'  type="email" name="email"
                                        value={this.state.email} onChange={this.onChange} required disabled />
                                    <Label pointing='below' as='a' color='green'>Your Username</Label>
                                    <Form.Input fluid icon='user' iconPosition='left' type="text" name="username"
                                        value={this.state.username} onChange={this.onChange} required disabled />
                                    <Label pointing='below' as='a' color='green'>Your Role</Label>
                                    <Form.Group inline>
                                        <Form.Input icon='lock' iconPosition='left' type="text" name="role" disabled
                                            value={this.state.role} onChange={this.onChange} />
                                        <Dropdown selection placeholder='Choose Role'
                                            options={roleOptions}  onChange={this.roleChange}/>
                                    </Form.Group>
                                    <Label pointing='below' as='a' color='green'>Active</Label>
                                    <Form.Group inline>
                                        <Form.Input icon='lock' iconPosition='left' type="text" name="isActive" disabled
                                            value={ this.state.isActive ? '是' : '否' } onChange={this.onChange} />
                                        <Dropdown selection placeholder='Choose Active'
                                            options={activeOptions} onChange={this.activeChange} />
                                    </Form.Group>
                                </Form>
                            </Card.Content>
                        </Card>
                    </Grid.Column>
                </Grid.Row>
            </Grid>
        );
    }
}
export default withRouter(UserEdit);